<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery显示 show /隐藏 hide </title>
    <style>
        #show { display: none;}
    </style>
</head>
<body>
    <div id="wrap">
        <h3 id="hidebtn">隐藏</h3>
        <p id="hide">因为时间是宝贵的，我们提供快捷方便的学习方法。在菜鸟教程,你可以学习需要的知识。</p>

        <h3 id="showbtn">显示</h3>
        <!-- 隐藏下面这一段文字 -->
        <p id="show">因为时间是宝贵的，我们提供快捷方便的学习方法。在菜鸟教程,你可以学习需要的知识。</p>

        <h3 id="autobtn">隐藏/显示自动切换</h3>
        <p id="auto">因为时间是宝贵的，我们提供快捷方便的学习方法。在菜鸟教程,你可以学习需要的知识。</p>
    </div>
</body>
<script src="jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#showbtn").click(function(){
            // show() 速度   毫秒 6000 3000    slow  / fast
            $("#show").show(3000);
        })

        $("#hidebtn").click(function() {
            $("#hide").hide("fast");
        })
        
        $("#autobtn").click(function() {
            $("#auto").toggle("slow");
        })
    })
</script>
</html>